export const baseUsage = `import {
    PhPage,
    PhHeader,
    PhBody,
    PhMain,
    PhSider,
    PhFlex} from 'phoeon'`;
export const layout1 = `<ph-page>
    <ph-header>
        <h1>header</h1>
    </ph-header>
    <ph-body>
        <ph-sider>sider</ph-sider>
        <ph-main>main</ph-main>
    </ph-body>
</ph-page>`;
export const layout2 = `<ph-page :col="false">
    <ph-sider>sider</ph-sider>
    <ph-body :col="true">
        <ph-header>
            <h1 style="position:relative;z-index:2">header</h1>
        </ph-header>
        <ph-main>main</ph-main>
    </ph-body>
</ph-page>`;
export const flex1 = `<ph-page>
    <ph-header>
        <h1>header</h1>
    </ph-header>
    <ph-body :col="false">
        <ph-sider>sider</ph-sider>
        <ph-flex height="100%" :col="true">
            <ph-flex bg="var(--ph-primary)">1</ph-flex>
            <ph-flex bg="var(--ph-success)">2</ph-flex>
            <ph-flex bg="var(--ph-danger)">3</ph-flex>
            <ph-flex bg="var(--ph-warning)">4</ph-flex>
            <ph-flex bg="var(--ph-golden)">5</ph-flex>
        </ph-flex>
    </ph-body>
</ph-page>`;
export const flex2 = `<ph-page>
    <ph-header>
        <h1>header</h1>
    </ph-header>
    <ph-body :col="false">
        <ph-sider>sider</ph-sider>
        <ph-flex height="100%" :col="true">
            <ph-flex flex="0 0 10%" bg="var(--ph-primary)">1</ph-flex>
            <ph-flex flex="0 0 20%" bg="var(--ph-success)">2</ph-flex>
            <ph-flex flex="0 0 30%" bg="var(--ph-danger)">3</ph-flex>
            <ph-flex flex="0 0 40%" bg="var(--ph-warning)">4</ph-flex>
            <ph-flex flex="0 0 50%" bg="var(--ph-golden)">5</ph-flex>
        </ph-flex>
    </ph-body>
</ph-page>`;
export const flex3 = `<ph-page>
    <ph-header>
        <h1>header</h1>
    </ph-header>
    <ph-body :col="false">
        <ph-sider>sider</ph-sider>
        <ph-flex height="100%" :col="true">
            <ph-flex bg="var(--ph-primary)">1</ph-flex>
            <ph-flex>
                <ph-flex height="100%" bg="var(--ph-danger)">2</ph-flex>
                <ph-flex height="100%" bg="var(--ph-success)">2</ph-flex>
                <ph-flex height="100%" bg="var(--ph-danger)">3</ph-flex>
                <ph-flex height="100%" bg="var(--ph-warning)">4</ph-flex>
            </ph-flex>
            <ph-flex bg="var(--ph-golden)">5</ph-flex>
        </ph-flex>
    </ph-body>
</ph-page>`;
